<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>数据仓库中变量的值</h1>
    <p>{{ msg }}</p>
    <p>{{ id }}</p>
    <p>{{ username }}</p>
    <p>{{ password }}</p>
    <p>{{ phone }}</p>
    <p>{{ address }}</p>
    <p>{{ hobbies }}</p>
    <!--
        非正常数据一般有三种
        null、undefined、NaN
        null与undefined会以空字符串显示
        NaN会正常显示
    -->
    <h1>非正常数据</h1>
    <p>{{key1}}</p>
    <p>{{key2}}</p>
    <p>{{key3}}</p>
    <!--
        当数据仓库中没有对应的数据
        则控制台报错
    -->
    <h1>数据仓库中没有的数据</h1>
    <!--<p>{{ gender }}</p>-->

    <!--
        在插值表达式中可以使用JS表达式
        如果需要打印一个字符串
        该字符串必须加引号
        否则会认为获取数据仓库中对应key的数据
    -->
    <h1>JS表达式</h1>
    <p>{{ 1+1 }}</p>
    <p>{{ "admin" }}</p>
    <p>{{ 2 > 1 ? "大于" : "小于" }}</p>

    <h1>JS内置对象</h1>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>
</div>
<script>
    new Vue({
        el: "#d1",
        data: {
            msg: "Hello Vue",
            id: 1,
            username: "德玛西亚",
            password: "123456",
            phone: "13812345678",
            address: "英雄联盟",
            hobbies: "人在塔在",
            key1: null,
            key2: undefined,
            key3: NaN
        }
    })
</script>
</body>
</html>